<template>
  <div class="body-bg">
    <van-nav-bar>
      <template #left>
        <van-icon
          name="arrow-left"
          style="font-size: 20px"
          @click="$router.back()"
        />
      </template>
      <template #title>
        <h3>我的订单</h3>
      </template>
    </van-nav-bar>

    <van-tabs v-model="active">
      <van-tab title="等待接单">
        <div class="box-one">
          <van-panel
            title="订单号： 1213301"
            desc="时间： 2020-12-7-13:29"
            status="￥40.0"
          >
            <div>
              <van-cell title="您的位置" icon="location-o" />
              <van-cell title="评价" icon="smile-o" />
            </div>
            <template #footer>
              <van-row>
                <van-col offset="18" span="12">
                  <van-button class="btn" size="small" type="danger"
                    >删除</van-button
                  >
                </van-col>
              </van-row>
            </template>
          </van-panel>
        </div>
        <div class="box-one">
          <van-panel
            title="订单号： 1213301"
            desc="时间： 2020-12-7-13:29"
            status="￥40.0"
          >
            <div>
              <van-cell title="您的位置" icon="location-o" />
              <van-cell title="评价" icon="smile-o" />
            </div>
            <template #footer>
              <van-row>
                <van-col offset="18" span="12">
                  <van-button class="btn" size="small" type="danger"
                    >删除</van-button
                  >
                </van-col>
              </van-row>
            </template>
          </van-panel>
        </div>
        <div class="box-one">
          <van-panel
            title="订单号： 1213301"
            desc="时间： 2020-12-7-13:29"
            status="￥40.0"
          >
            <div>
              <van-cell title="您的位置" icon="location-o" />
              <van-cell title="评价" icon="smile-o" />
            </div>
            <template #footer>
              <van-row>
                <van-col offset="18" span="12">
                  <van-button class="btn" size="small" type="danger"
                    >删除</van-button
                  >
                </van-col>
              </van-row>
            </template>
          </van-panel>
        </div>
      </van-tab>

      <van-tab title="已完成">
        <div class="box-one">
          <van-panel
            title="订单号： 1213301"
            desc="时间： 2020-12-7-13:29"
            status="￥40.0"
          >
            <div>
              <van-cell title="您的位置" icon="location-o" />
              <van-cell title="评价" icon="smile-o" />
            </div>
            <template #footer>
              <van-row>
                <van-col offset="18" span="12">
                  <van-button class="btn" size="small" type="danger"
                    >删除</van-button
                  >
                </van-col>
              </van-row>
            </template>
          </van-panel>
        </div>
        <div class="box-one">
          <van-panel
            title="订单号： 1213301"
            desc="时间： 2020-12-7-13:29"
            status="￥40.0"
          >
            <div>
              <van-cell title="您的位置" icon="location-o" />
              <van-cell title="评价" icon="smile-o" />
            </div>
            <template #footer>
              <van-row>
                <van-col offset="18" span="12">
                  <van-button class="btn" size="small" type="danger"
                    >删除</van-button
                  >
                </van-col>
              </van-row>
            </template>
          </van-panel>
        </div>
        <div class="box-one">
          <van-panel
            title="订单号： 1213301"
            desc="时间： 2020-12-7-13:29"
            status="￥40.0"
          >
            <div>
              <van-cell title="您的位置" icon="location-o" />
              <van-cell title="评价" icon="smile-o" />
            </div>
            <template #footer>
              <van-row>
                <van-col offset="18" span="12">
                  <van-button class="btn" size="small" type="danger"
                    >删除</van-button
                  >
                </van-col>
              </van-row>
            </template>
          </van-panel>
        </div>
      </van-tab>

      <van-tab title="已取消">
        <div class="box-one">
          <van-panel
            title="订单号： 1213301"
            desc="时间： 2020-12-7-13:29"
            status="￥40.0"
          >
            <div>
              <van-cell title="您的位置" icon="location-o" />
              <van-cell title="评价" icon="smile-o" />
            </div>
            <template #footer>
              <van-row>
                <van-col offset="18" span="12">
                  <van-button class="btn" size="small" type="danger"
                    >删除</van-button
                  >
                </van-col>
              </van-row>
            </template>
          </van-panel>
        </div>
        <div class="box-one">
          <van-panel
            title="订单号： 1213301"
            desc="时间： 2020-12-7-13:29"
            status="￥40.0"
          >
            <div>
              <van-cell title="您的位置" icon="location-o" />
              <van-cell title="评价" icon="smile-o" />
            </div>
            <template #footer>
              <van-row>
                <van-col offset="18" span="12">
                  <van-button class="btn" size="small" type="danger"
                    >删除</van-button
                  >
                </van-col>
              </van-row>
            </template>
          </van-panel>
        </div>
        <div class="box-one">
          <van-panel
            title="订单号： 1213301"
            desc="时间： 2020-12-7-13:29"
            status="￥40.0"
          >
            <div>
              <van-cell title="您的位置" icon="location-o" />
              <van-cell title="评价" icon="smile-o" />
            </div>
            <template #footer>
              <van-row>
                <van-col offset="18" span="12">
                  <van-button class="btn" size="small" type="danger"
                    >删除</van-button
                  >
                </van-col>
              </van-row>
            </template>
          </van-panel>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
    };
  },
};
</script>

<style  lang="scss" scoped>
.body-bg {
  // position: absolute;
  width: 100%;
  // height: 100vh;
  top: 0;
  left: 0;
  overflow-y: auto;
  background: #f0f0f0;
}
span {
  color: #999;
  margin-top: 10px;
}
.custom-image .van-empty__image {
  width: 100px;
  height: 100px;
  margin-top: 150px;
}
.box-one {
  width: 90%;
  border: 1px red solid;
  margin: 10px auto;
}
.btn {
  width: 70px;
}
.btn-one {
  margin-right: 10px;
  text-align: center;
}
</style>